<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="ImagePreview 预览图片"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-row>
        <hips-col
          v-for="(img, index) in imgs"
          :key="index"
          span="6"
        >
          <img
            :src="img"
            class="image"
            @click="showPreviewer(index)"
          >
        </hips-col>
      </hips-row>

      <hips-button @click="addImage">
        addImage
      </hips-button>
      <hips-button @click="removeImage">
        removeImage
      </hips-button>
      <hips-button @click="destroyIt">
        destroy
      </hips-button>
    </demo-block>

    <demo-block title="自定义">
      <hips-button @click="showCustom">
        showCustom
      </hips-button>
      <hips-image-preview
        ref="imagePreview"
        v-model="isVisible"
        :imgs="imgs"
        :initial-index="initialIndex"
        @on-change="change"
        @on-hide="hide"
      >
        <div
          slot="header"
          class="header"
        >
          {{ initialIndex + 1 }}
        </div>

        <div
          slot="footer"
          class="footer"
        >
          第{{ initialIndex + 1 }}页
        </div>
      </hips-image-preview>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button, Row, Col } from '@hips/vue-ui';

export default {
  components: {
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  mixins: [ BasicView ],
  data() {
    return {
      imgs: [],
      initialIndex: 1,
      isVisible: false,
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.imgs = [
        'https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg',
        'https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg',
        'https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg',
        'https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg',
      ];
    });
  },
  methods: {
    showPreviewer(index) {
      this.$hips.imagePreview.show({
        imgs: this.imgs,
        initialIndex: index,
        onChange: (index) => {
          console.log(`on-change index = ${index}`);
        },
        onHide: () => {
          console.log('hide');
        },
      });
    },
    showCustom() {
      this.isVisible = true;
    },

    hide() {
      console.log('hide ==== ' + this.isVisible);
    },

    change(index) {
      console.log('change ==== ' + index);
      this.initialIndex = index;
    },

    addImage() {
      this.imgs.push(
        'https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg',
      );
    },
    removeImage() {
      this.imgs.splice(this.imgs.length - 1, 1);
    },
    destroyIt() {
      this.$hips.imagePreview.destroy();
    },
  },
};
</script>

<style lang="stylus">
.image{
  width 100%
}
.header, .footer {
  height 40px
  line-height 40px
  text-align center
  background white
}
</style>
